<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>事件的基本使用</title>
  <script type="text/javascript" src="../js/vue.js"></script>
</head>
<body>
<!--
     1.事件处理
        1.1 v-on:click = "xxxx" 简写为 @click ="xxxx"  xxxx为vue实例中的函数，即methods中的函数
        1.2 事件的回调必须写在methods中，methods中的函数都是被Vue实例管理的函数。
        1.3 methods中的this是Vue实例对象，如果使用“=>”函数，this将是windows对象，不再是Vue实例对象
-->
<div id="root">
  <h2>欢迎来到{{name}}参观</h2>
  <button v-on:click="showInfo">点我弹出提示信息</button>
  <button @click="showInfo1($event,66)">点我弹出提示信息1</button>
</div>
</body>
<script type="text/javascript">
  var vm = new Vue({
    el:'#root',
    data:{
      name:'智慧城'
    },
    methods:{
      showInfo(event){
        console.log(event)//拿到事件对象
        console.log(event.target)//拿到时间目标对象
        console.log(this)//拿到vm对象，此处的this是vm
        alert("你好朋友")
      },
      showInfo1(event,num){
        console.log(event)//拿到事件对象
        alert("你好朋友"+num)
      }
    }
  })
</script>
</html>